<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景切换系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: url(https://placehold.co/1920x1080/4CAF50/FFFFFF?text=Green+Nature) no-repeat center center fixed;
            background-size: cover;
            transition: background-image 0.8s ease, filter 0.8s ease;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: -1;
        }
        
        .container {
            text-align: center;
            padding: 30px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 15px;
            backdrop-filter: blur(5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            max-width: 90%;
            margin: 20px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
        }
        
        .nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        
        .thumbnail {
            width: 150px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .thumbnail:hover {
            transform: scale(1.1);
            border: 2px solid white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .thumbnail.active {
            border: 3px solid #FFD700;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
        }
        
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .control-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            min-width: 200px;
        }
        
        .control-group h3 {
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        
        input[type="range"] {
            width: 100%;
        }
        
        button {
            padding: 12px 25px;
            background: linear-gradient(to right, #4CAF50, #8BC34A);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: all 0.3s ease;
            margin: 5px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .theme-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .theme-btn {
            padding: 10px 20px;
            border-radius: 30px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .theme-btn:nth-child(1) { background: linear-gradient(to right, #4CAF50, #8BC34A); color: white; }
        .theme-btn:nth-child(2) { background: linear-gradient(to right, #2196F3, #03A9F4); color: white; }
        .theme-btn:nth-child(3) { background: linear-gradient(to right, #9C27B0, #E91E63); color: white; }
        .theme-btn:nth-child(4) { background: linear-gradient(to right, #FF9800, #FF5722); color: white; }
        
        .theme-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .current-bg {
            margin-top: 20px;
            font-style: italic;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;
            }
            
            .thumbnail {
                width: 120px;
                height: 80px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    
    <div class="container">
        <h1>高级背景切换系统</h1>
        <p>选择下方的缩略图来更改页面背景，或使用控制面板调整视觉效果</p>
        
        <div class="nav">
            <img class="thumbnail active" src="https://placehold.co/1920x1080/4CAF50/FFFFFF?text=Green+Nature" alt="绿色自然">
            <img class="thumbnail" src="https://placehold.co/1920x1080/2196F3/FFFFFF?text=Blue+Sky" alt="蓝色天空">
            <img class="thumbnail" src="https://placehold.co/1920x1080/9C27B0/FFFFFF?text=Purple+Sunset" alt="紫色日落">
            <img class="thumbnail" src="https://placehold.co/1920x1080/FF9800/FFFFFF?text=Orange+Desert" alt="橙色沙漠">
            <img class="thumbnail" src="https://placehold.co/1920x1080/263238/FFFFFF?text=Dark+Mountains" alt="黑暗山脉">
        </div>
        
        <div class="controls">
            <div class="control-group">
                <h3>背景模糊度</h3>
                <div class="slider-container">
                    <input type="range" id="blurSlider" min="0" max="10" value="0">
                    <span id="blurValue">0px</span>
                </div>
            </div>
            
            <div class="control-group">
                <h3>背景亮度</h3>
                <div class="slider-container">
                    <input type="range" id="brightnessSlider" min="50" max="150" value="100">
                    <span id="brightnessValue">100%</span>
                </div>
            </div>
            
            <div class="control-group">
                <h3>覆盖层透明度</h3>
                <div class="slider-container">
                    <input type="range" id="overlaySlider" min="0" max="100" value="40">
                    <span id="overlayValue">40%</span>
                </div>
            </div>
        </div>
        
        <div class="theme-buttons">
            <button class="theme-btn" data-theme="nature">自然主题</button>
            <button class="theme-btn" data-theme="ocean">海洋主题</button>
            <button class="theme-btn" data-theme="sunset">日落主题</button>
            <button class="theme-btn" data-theme="desert">沙漠主题</button>
        </div>
        
        <div>
            <button id="saveBtn">保存当前设置</button>
            <button id="resetBtn">恢复默认设置</button>
        </div>
        
        <div class="current-bg" id="currentBg">当前背景: 绿色自然</div>
    </div>

    <script>
        // 获取DOM元素
        const thumbnails = document.querySelectorAll('.thumbnail');
        const blurSlider = document.getElementById('blurSlider');
        const blurValue = document.getElementById('blurValue');
        const brightnessSlider = document.getElementById('brightnessSlider');
        const brightnessValue = document.getElementById('brightnessValue');
        const overlaySlider = document.getElementById('overlaySlider');
        const overlayValue = document.getElementById('overlayValue');
        const overlayElement = document.querySelector('.overlay');
        const saveBtn = document.getElementById('saveBtn');
        const resetBtn = document.getElementById('resetBtn');
        const themeButtons = document.querySelectorAll('.theme-btn');
        const currentBg = document.getElementById('currentBg');
        
        // 背景图片数据
        const backgroundData = [
            { 
                url: "https://placehold.co/1920x1080/4CAF50/FFFFFF?text=Green+Nature", 
                name: "绿色自然",
                theme: "nature"
            },
            { 
                url: "https://placehold.co/1920x1080/2196F3/FFFFFF?text=Blue+Sky", 
                name: "蓝色天空",
                theme: "ocean"
            },
            { 
                url: "https://placehold.co/1920x1080/9C27B0/FFFFFF?text=Purple+Sunset", 
                name: "紫色日落",
                theme: "sunset"
            },
            { 
                url: "https://placehold.co/1920x1080/FF9800/FFFFFF?text=Orange+Desert", 
                name: "橙色沙漠",
                theme: "desert"
            },
            { 
                url: "https://placehold.co/1920x1080/263238/FFFFFF?text=Dark+Mountains", 
                name: "黑暗山脉",
                theme: "dark"
            }
        ];
        
        // 主题配置
        const themes = {
            nature: [0, 0],
            ocean: [1, 1],
            sunset: [2, 2],
            desert: [3, 3],
            dark: [4, 4]
        };
        
        // 初始化设置
        let currentSettings = {
            backgroundIndex: 0,
            blur: 0,
            brightness: 100,
            overlay: 40
        };
        
        // 加载保存的设置
        function loadSettings() {
            const savedSettings = localStorage.getItem('backgroundSettings');
            if (savedSettings) {
                currentSettings = JSON.parse(savedSettings);
                applySettings();
            }
        }
        
        // 应用设置
        function applySettings() {
            // 设置背景
            document.body.style.backgroundImage = `url(${backgroundData[currentSettings.backgroundIndex].url})`;
            
            // 设置模糊
            document.body.style.filter = `blur(${currentSettings.blur}px) brightness(${currentSettings.brightness}%)`;
            blurSlider.value = currentSettings.blur;
            blurValue.textContent = `${currentSettings.blur}px`;
            
            // 设置亮度
            brightnessSlider.value = currentSettings.brightness;
            brightnessValue.textContent = `${currentSettings.brightness}%`;
            
            // 设置覆盖层
            overlayElement.style.backgroundColor = `rgba(0, 0, 0, ${currentSettings.overlay/100})`;
            overlaySlider.value = currentSettings.overlay;
            overlayValue.textContent = `${currentSettings.overlay}%`;
            
            // 更新当前选中状态
            thumbnails.forEach((thumb, index) => {
                thumb.classList.toggle('active', index === currentSettings.backgroundIndex);
            });
            
            // 更新当前背景文本
            currentBg.textContent = `当前背景: ${backgroundData[currentSettings.backgroundIndex].name}`;
        }
        
        // 保存设置
        function saveSettings() {
            localStorage.setItem('backgroundSettings', JSON.stringify(currentSettings));
            alert('设置已保存！下次访问时将自动加载。');
        }
        
        // 重置设置
        function resetSettings() {
            currentSettings = {
                backgroundIndex: 0,
                blur: 0,
                brightness: 100,
                overlay: 40
            };
            applySettings();
            alert('设置已重置为默认值！');
        }
        
        // 绑定缩略图点击事件
        thumbnails.forEach((thumbnail, index) => {
            thumbnail.addEventListener('click', function() {
                currentSettings.backgroundIndex = index;
                applySettings();
            });
        });
        
        // 绑定模糊滑块事件
        blurSlider.addEventListener('input', function() {
            currentSettings.blur = parseInt(this.value);
            document.body.style.filter = `blur(${currentSettings.blur}px) brightness(${currentSettings.brightness}%)`;
            blurValue.textContent = `${currentSettings.blur}px`;
        });
        
        // 绑定亮度滑块事件
        brightnessSlider.addEventListener('input', function() {
            currentSettings.brightness = parseInt(this.value);
            document.body.style.filter = `blur(${currentSettings.blur}px) brightness(${currentSettings.brightness}%)`;
            brightnessValue.textContent = `${currentSettings.brightness}%`;
        });
        
        // 绑定覆盖层滑块事件
        overlaySlider.addEventListener('input', function() {
            currentSettings.overlay = parseInt(this.value);
            overlayElement.style.backgroundColor = `rgba(0, 0, 0, ${currentSettings.overlay/100})`;
            overlayValue.textContent = `${currentSettings.overlay}%`;
        });
        
        // 绑定主题按钮事件
        themeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const theme = this.dataset.theme;
                if (themes[theme]) {
                    currentSettings.backgroundIndex = themes[theme][0];
                    applySettings();
                }
            });
        });
        
        // 绑定保存和重置按钮
        saveBtn.addEventListener('click', saveSettings);
        resetBtn.addEventListener('click', resetSettings);
        
        // 初始化
        loadSettings();
    </script>
</body>
</html>